<template>
	<view class="auto-page">
		<view class="f-1 bg-white">
			<!-- 商家信息 -->
			<view class="shop-infomation f-row nav-icon grey-border-tb" @click="$navigate('shop-detail')">
				<view class="shop-avator">
					<image mode="aspectFill" :src="shopInfo ? shopInfo.mer_avatar : '../../static/icons/logo300x300.png'"></image>
				</view>
				<view class="f-1 f-column" style="padding-right: 45rpx;">
					<view class="shop-name single-text">{{shopInfo.mer_name}}</view>
					<view class="shop-introduction double-text">{{shopInfo.mer_info}}</view>
					<!-- <view class="shop-phonenumber single-text">服务电话:18038890098</view> -->
				</view>
			</view>
			<!-- 开关店设置 -->
			<view class="m-tb-30 p-lr-30 f-row grey-border-tb" style="align-items: center;">
				<view class="t-80-26">开店状态：</view>
				<view class="f-1 t-80-26">{{shopInfo.mer_state == 1 ? '营业中' : '已关闭' }}</view>
				<switch checked="true" @change="shopstatusChange" :checked="shopInfo.mer_state == 1" :disabled="setting" />
			</view>
			<!-- 其余功能 -->
			<view class="p-tb-30" style="border-top: 2rpx solid #ececec;">
				<view class="menu-list">
					<view class="menu-item f-column" v-for="(item , index) in menulist" :key="index" :style="menuItemWidth">
						<image class="menu-item-pic" mode="aspectFill" :src="item.icon" @click="$navigate(item.path , 'page' , item.data)"></image>
						<view class="menu-item-text">{{item.name}}</view>
						<view class="unread-dot" v-if="index == 5 && noticeUnRead !== 0">
							<span>{{noticeUnRead}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="logout-button" @click="logout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import OTHER from '../../api/other.js'
	import SETTING from '../../api/setting.js'
	export default {
		data() {
			return {
				noticeUnRead: 0,
				shopInfo: false,
				setting: false,
				menulist: [{
						name: '营销',
						icon: '../../static/icons/home/home_menu_market.png',
						path: 'market'
					} ,{
						name: '财务',
						icon: '../../static/icons/home/home_menu_finance.png',
						path: 'finance'
					} ,{
						name: '用户',
						icon: '../../static/icons/home/home_menu_user.png',
						path: 'user-manage'
					} ,{
						name: '图片管理',
						icon: '../../static/icons/picmanage.png',
						path: 'pic-manage',
						data: {
							number: 0,
							status: 1,
							picType: 'check_image'
						}
					},
					// {
					// 	name: '运费模板',
					// 	icon: '../../static/icons/shippingtemplates.png',
					// 	path: ''
					// },
					{
						name: '自提地址',
						icon: '../../static/icons/getbyself.png',
						path: 'getbyself'
					},
					{
						name: '公告列表',
						icon: '../../static/icons/notice.png',
						path: 'notice'
					},
					{
						name: '设置',
						icon: '../../static/icons/setting.png',
						path: 'shop-setting'
					}
				]
			}
		},
		onLoad() {
			_this = this;
			OTHER.noticeLst({
				is_read : 0
			}).then((res) => {
				console.log(res);
				_this.noticeUnRead = res.count;
			}).catch((err) => {
				console.log(err);
			});
		},
		onShow() {
			SETTING.merInfo().then((res) => {
				console.log(res);
				_this.shopInfo = res;
				_this.$store.commit('UPDATE_SHOP',_this.shopInfo)
			}).catch((err) => {
				console.log(err);
			});
		},
		computed: {
			menuItemWidth: function() {
				let length = _this.menulist;
				let result = length == 3 ? 'width:33vw' :
					length == 4 ? 'width:25vw' :
					(length > 5 || length == 5) ? 'width:20vw' : 'width:33vw';
				return result;
			}
		},
		methods: {
			shopstatusChange(e) {
				console.log(e.target.value);
				if (_this.setting) return;
				_this.setting = true;
				uni.showLoading({
					title: e.target.value ? '开店中...' : '关店中...'
				});
				SETTING.merStatus({
							mer_state: e.target.value ? 1 : 0
					}).then((res) => {
						_this.shopInfo.mer_state = e.target.value ? 1 : 0;
						uni.hideLoading({
							success() {
								uni.showToast({
									title: e.target.value ? '开店成功' : '关店成功',
									icon: 'success'
								});
								_this.setting = false;
							}
						});
					}).catch((err) => {
						uni.hideLoading({
							success() {
								uni.showToast({
									title: e.target.value ? '开店失败' : '关店失败',
									icon: 'none'
								});
								_this.setting = false;
							}
						});
					});
			},
			logout() {
				_this.$store.dispatch('LOGOUT')
			}
		}
	}
</script>

<style>
	.shop-infomation {
		box-sizing: border-box;
		height: auto;
	}

	.shop-avator {
		height: 100rpx;
		width: 100rpx;
		margin: 28rpx 30rpx;
		border-radius: 16rpx;
	}
	.shop-avator image {
		height: 100rpx;
		width: 100rpx;
	}

	.shop-name {
		font-size: 26rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.shop-introduction {
		font-size: 22rpx;
		color: #999999;
		height: 80rpx;
		line-height: 40rpx;
	}

	.shop-phonenumber {
		font-size: 22rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.menu-list {
		position: relative;
	}

	.menu-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.menu-item-pic {
		height: 60rpx;
		width: 60rpx;
	}

	.menu-item-text {
		line-height: 70rpx;
		font-size: 26rpx;
	}

	.logout-button {
		position: absolute;
		height: 80rpx;
		border-top: 2rpx solid #d8d8d8;
		border-bottom: 2rpx solid #d8d8d8;
		text-align: center;
		line-height: 80rpx;
		color: #df2000;
		font-size: 26rpx;
		bottom: 100rpx;
		left: 0;
		right: 0;
	}

	.logout-button:active {
		background-color: rgba(196, 196, 196, .1);
		color: rgba(223, 32, 0, .8);
	}
	
	.unread-dot {
		position: absolute;
		right: 50%;
		top: 0;
		height: 30rpx;
		width: 30rpx;
		border-radius: 15rpx;
		background-color: #1a66ff;
		margin-right: -60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.unread-dot span {
		font-size: 20rpx;
		line-height: 30rpx;
		color: #FFF;
	}
</style>
